<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统一地图平台API</title>
    <meta name="keywords" content="统一地图平台api">
    <meta name="description" content="统一地图平台api">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="./../script/api.css" rel="stylesheet">
</head>

<body class="restdemo-page">
    <div class="page_wrapper">
        <div data-tpl="" class="content-sidebar has_right">
            <div class="content">
                <div class="crumbs">
                    您现在的位置：
                    <a>开发</a>
                    &gt;
                    <a>地图JS API</a>
                    &gt;
                    <a>基础地图</a></div>
                <article>
                    <h1 class="title">
                        基础地图
                        <span class="update-time">最后更新时间: 2020年04月30日</span>
                    </h1>
                    <div>
                        <div class="md-container">
                            <h2>初始化</h2>
                            <p>第一步、导入资源文件</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="html hljs xml">
    // 引入统一地图平台服务脚本
    &lt;script src="./js_example/script/map/map.min.js"&gt;&lt;/script&gt;
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>第二步、初始化地图</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
         var amap = null;
            map.Factory.create('mapui', {
                // mapbox样式
                style: 'mapbox://styles/mapbox/outdoors-v10',
                center: [110.32343, 19.99401],
                zoom: 11,
                strategy: ['mapboxgl', 'openlayers', 'leaflet'],//配置地图引擎
                fullExtent: {
                xmin: 108.23365,
                ymin: 17.95253,
                xmax: 111.78395,
                ymax: 20.13104
                }
            }, (o) => {
                amap = o;
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>参数如下:</p>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>序号</p>
                                                </th>
                                                <th>
                                                    <p>名称</p>
                                                </th>
                                                <th>
                                                    <p>类型</p>
                                                </th>
                                                <th>
                                                    <p>值说明</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>1</p>
                                                </td>
                                                <td>
                                                    <p>element</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>显示地图的html元素ID</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>2</p>
                                                </td>
                                                <td>
                                                    <p>param</p>
                                                </td>
                                                <td>
                                                    <p>MapParas</p>
                                                </td>
                                                <td>
                                                    <p>地图参数对象</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>3</p>
                                                </td>
                                                <td>
                                                    <p>callback</p>
                                                </td>
                                                <td>
                                                    <p>Function</p>
                                                </td>
                                                <td>
                                                    <p>回调函数。返回Map对象</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <h1>MapParas对象:</h1>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>名称</p>
                                                </th>
                                                <th>
                                                    <p>类型</p>
                                                </th>
                                                <th>
                                                    <p>是否必须(true/false)</p>
                                                </th>
                                                <th>
                                                    <p>默认值</p>
                                                </th>
                                                <th>
                                                    <p>值说明</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>style</p>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                                <td>
                                                    <p>true</p>
                                                </td>
                                                <td>
                                                    <p></p>
                                                </td>
                                                <td>
                                                    <p>地图方案地址</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>strategy</p>
                                                </td>
                                                <td>
                                                    <p>Array</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>['mapboxgl', 'openlayers', 'leaflet'];</p>
                                                </td>
                                                <td>
                                                    <p>地图引擎优先策略</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>projection</p>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>"EPSG:4326"</p>
                                                </td>
                                                <td>
                                                    <p>空间参考。</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>zoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>10</p>
                                                </td>
                                                <td>
                                                    <p>当前地图级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>maxZoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>24</p>
                                                </td>
                                                <td>
                                                    <p>最大地图级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>minZoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>1</p>
                                                </td>
                                                <td>
                                                    <p>最小地图级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>center</p>
                                                </td>
                                                <td>
                                                    <p>[number,number]</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>[110.32343, 19.99401]</p>
                                                </td>
                                                <td>
                                                    <p>中心点坐标</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>fullExtent</p>
                                                </td>
                                                <td>
                                                    <p>{ xmin: number, ymin: number, xmax: number, ymax: number } | null
                                                    </p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>null</p>
                                                </td>
                                                <td>
                                                    <p>全图时范围</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>controls</p>
                                                </td>
                                                <td>
                                                    <p>Array</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>['Scale', 'Navigation']</p>
                                                </td>
                                                <td>
                                                    <p>初始化地图控件</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <h1>Map对象</h1>
                            <h2>方法</h2>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>方法</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                                <th>
                                                    <p>参数</p>
                                                </th>
                                                <th>
                                                    <p>返回值</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setStyle</p>
                                                </td>
                                                <td>
                                                    <p>设置地图方案</p>
                                                </td>
                                                <td>
                                                    <p>style:string | Object</p>
                                                    </p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>fullExtent</p>
                                                </td>
                                                <td>
                                                    <p>全图</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getExtent</p>
                                                </td>
                                                <td>
                                                    <p>设置当前地图范围</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    e:{ xmin: number, ymin: number, xmax: number, ymax: number }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>flyTo</p>
                                                </td>
                                                <td>
                                                    <p>飞行到指定范围</p>
                                                </td>
                                                <td>
                                                    <p>extent: { xmin: number, ymin: number, xmax: number, ymax: number}
                                                    </p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>easeTo</p>
                                                </td>
                                                <td>
                                                    <p>地图平移到指定中心点</p>
                                                </td>
                                                <td>
                                                    <p>option:{
                                                        center: [number, number], // 中心点
                                                        zoom?: number, //指定地图级别
                                                        pitch?: number, // 抛物角度
                                                        bearing?: number, // 罗盘方向
                                                        speed?: number // 飞行速度
                                                        }</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>zoomToPoint</p>
                                                </td>
                                                <td>
                                                    <p>缩放到指定点</p>
                                                </td>
                                                <td>
                                                    <p>1.lon : number 经度</p>
                                                    <p>2.lat : number 纬度</p>
                                                    <p>3.level? : number 地图级别</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>zoomToLevel</p>
                                                </td>
                                                <td>
                                                    <p>缩放到指定级别</p>
                                                </td>
                                                <td>
                                                    <p>1.level : number 地图级别</p>
                                                    <p>2.lon ? : number 经度</p>
                                                    <p>3.lat ? : number 纬度</p>

                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>zoomToExtent</p>
                                                </td>
                                                <td>
                                                    <p>缩放到指定区域</p>
                                                </td>
                                                <td>
                                                    <p>extent: [number, number, number, number]</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>addControl</p>
                                                </td>
                                                <td>
                                                    <p>添加控件</p>
                                                </td>
                                                <td>
                                                    <p>1.type: string
                                                        (导览-'Navigation',比例尺-'Scale',定位-'Geolocate',全屏-'FullScreen',鹰眼-'MiniMap')
                                                    </p>
                                                    <p>2.option?: MapControlParas | any</p>
                                                    <p>MapControlParas说明</p>
                                                    <p>position : string 位置 ('top-right' | 'top-left' | 'bottom-right' |
                                                        'bottom-left' = 'bottom-right')</p>
                                                    <p>unit? : string 单位比例尺控件使用 默认(米-'metric')</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>removeControl</p>
                                                </td>
                                                <td>
                                                    <p>移除控件</p>
                                                </td>
                                                <td>
                                                    <p>type: string
                                                        (导览-'Navigation',比例尺-'Scale',定位-'Geolocate',全屏-'FullScreen',鹰眼-'MiniMap')
                                                    </p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getZoom</p>
                                                </td>
                                                <td>
                                                    <p>获取当前地图级别</p>
                                                </td>
                                                <td>

                                                </td>
                                                <td>
                                                    number
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getCenter</p>
                                                </td>
                                                <td>
                                                    <p>获取地图中心点坐标</p>
                                                </td>
                                                <td>

                                                </td>
                                                <td>
                                                    [number,number]
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>exportPng</p>
                                                </td>
                                                <td>
                                                    <p>输出地图为PNG</p>
                                                </td>
                                                <td>
                                                    <p>name : String 输出png文件名称</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>exportPdf</p>
                                                </td>
                                                <td>
                                                    <p>输出地图为PDF</p>
                                                </td>
                                                <td>
                                                    <p>1.name : String 输出png文件名称</p>
                                                    <p>2.option?: { width: number, height: number } 指定范围</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>addSource</p>
                                                </td>
                                                <td>
                                                    <p>添加数据源</p>
                                                </td>
                                                <td>
                                                    <p>1.id : String 数据源ID</p>
                                                    <p>2.option : SourceParas 数据源参数对象。详情参考《图层加载》章节</p>
                                                </td>
                                                <td>
                                                    <p>Source 详情参考《图层加载》章节</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getSouce</p>
                                                </td>
                                                <td>
                                                    <p>获取Source对象</p>
                                                </td>
                                                <td>
                                                    <p>1.id : String 数据源ID</p>
                                                </td>
                                                <td>
                                                    <p>Source</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>addLayer</p>
                                                </td>
                                                <td>
                                                    <p>添加图层对象</p>
                                                </td>
                                                <td>
                                                    <p>1.id : String 数据源ID</p>
                                                    <p>2.source : String 数据源ID</p>
                                                    <p>3.option : LayerParas 图层参数对象。详情参考《图层加载》章节</p>
                                                </td>
                                                <td>
                                                    <p>Layer 详情参考《图层加载》章节</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getLayer</p>
                                                </td>
                                                <td>
                                                    <p>获取图层对象</p>
                                                </td>
                                                <td>
                                                    <p>1.id : String 图层ID</p>
                                                </td>
                                                <td>
                                                    <p>Layer</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getLayers</p>
                                                </td>
                                                <td>
                                                    <p>根据分组ID，获取所有图层信息</p>
                                                </td>
                                                <td>
                                                    <p>group:string 图层分组ID</p>
                                                </td>
                                                <td>
                                                    <p>Layer[]</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getLayersBySource</p>
                                                </td>
                                                <td>
                                                    <p>根据数据源名称，获取所有图层对象</p>
                                                </td>
                                                <td>
                                                    <p>source:数据源名称 图层分组ID</p>
                                                </td>
                                                </td>
                                                <td>
                                                    <p>Layer[]</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getMap</p>
                                                </td>
                                                <td>
                                                    <p>获取原生的地图引擎地图对象</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>any 对应地图引擎的地图对象</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>queryRenderedFeaturesByPixel</p>
                                                </td>
                                                <td>
                                                    <p>通过屏幕像素坐标点查询指定图层的要素</p>
                                                </td>
                                                <td>
                                                    <p>1.pixel : [number, number] 屏幕点坐标</p>
                                                    <p>2.layerId : String 图层ID</p>
                                                </td>
                                                <td>
                                                    <p> GeoJSON[] 返回成员值为Geojson格式的数组对象 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>queryRenderedFeaturesByPoint</p>
                                                </td>
                                                <td>
                                                    <p>通过地理坐标点查询指定图层的要素</p>
                                                </td>
                                                <td>
                                                    <p>1.point : [number, number] 地理点坐标</p>
                                                    <p>2.layerId : String 图层ID</p>
                                                </td>
                                                <td>
                                                    <p> GeoJSON[] 返回成员值为Geojson格式的数组对象 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>resize</p>
                                                </td>
                                                <td>
                                                    <p>重置地图大小</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>project</p>
                                                </td>
                                                <td>
                                                    <p>地理坐标转像素坐标</p>
                                                </td>
                                                <td>
                                                    <p>1.point : [number, number] 地理点坐标</p>
                                                </td>
                                                <td>
                                                    <p>[number, number] 屏幕坐标值</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>unproject</p>
                                                </td>
                                                <td>
                                                    <p>像素坐标转地理坐标</p>
                                                </td>
                                                <td>
                                                    <p>1.pixel : [number, number] 屏幕坐标值</p>
                                                </td>
                                                <td>
                                                    <p>[number, number] 地理坐标值</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <h2>事件</h2>
                            <p>通过on(type: string, fuc: Function, params?: any)绑定事件。</p>
                            <p>通过un(type: string, fuc: Function, params?: any)取消事件绑定。</p>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>事件名称</p>
                                                </th>
                                                <th>
                                                    <p>事件type</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标移出地图</p>
                                                </td>
                                                <td>
                                                    <p>mouseout</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标点击</p>
                                                </td>
                                                <td>
                                                    <p>mousedown</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标键弹起</p>
                                                </td>
                                                <td>
                                                    <p>mouseup</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标移动</p>
                                                </td>
                                                <td>
                                                    <p>mousemove</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标点击</p>
                                                </td>
                                                <td>
                                                    <p>click</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>鼠标双击</p>
                                                </td>
                                                <td>
                                                    <p>dblclick</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>地图加载事件</p>
                                                </td>
                                                <td>
                                                    <p>load</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>地图开始移动</p>
                                                </td>
                                                <td>
                                                    <p>movestart</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>地图移动进行中</p>
                                                </td>
                                                <td>
                                                    <p>move</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>地图结束移动</p>
                                                </td>
                                                <td>
                                                    <p>moveend</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</body>

</html>